@ts-nocheck
<template>
  <div>
    <div class="title-wrapper">
      <div
        class="title-content"
        :style="{
          width: indicatorSideLength + 480 + 'px',
        }"
      >
        <div style="width: 64px; height: 40px; text-aligh: center">
          <el-carousel
            height="40px"
            arrow="never"
            indicator-position="none"
            direction="vertical"
          >
            <el-carousel-item>
              <Sunny style="width: 100%; height: 100%" />
            </el-carousel-item>
            <el-carousel-item>
              <PartlyCloudy style="width: 100%; height: 100%" />
            </el-carousel-item>
            <el-carousel-item>
              <MostlyCloudy style="width: 100%; height: 100%" />
            </el-carousel-item>
            <el-carousel-item>
              <Drizzling style="width: 100%; height: 100%" />
            </el-carousel-item>
            <el-carousel-item>
              <Pouring style="width: 100%; height: 100%" />
            </el-carousel-item>
            <el-carousel-item>
              <Lightning style="width: 100%; height: 100%" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="title">
          <span> 终端区通行能力 </span>
        </div>
        <div>
          <el-button
            type="primary"
            link
            icon="Calendar"
            @click="handleOpenHistory"
            style="margin-right: 12px"
            >历史记录</el-button
          >
          <el-button
            type="primary"
            link
            icon="SetUp"
            @click="handleOpenSetting"
            style="margin-right: 12px"
            >参数设置</el-button
          >
        </div>
      </div>
    </div>
    <div class="wrapper-outer">
      <div
        class="wrapper-indicator wrapper-inner"
        :style="{
          width: indicatorSideLength + 'px',
          height: indicatorSideLength + 'px',
        }"
      >
        <indicator-view
          style="width: 100%; height: 100%"
          @clickConfig="handleOpenConfig"
          @hover="handleHover"
        />
      </div>
      <div
        class="wrapper-timeline wrapper-inner"
        :style="{ height: indicatorSideLength + 'px' }"
      >
        <timeline-view
          ref="timeline"
          @clickCreate="handleOpenCreate"
          @clickDelete="handleDelete"
          @click="handleHover(-1)"
          style="width: 100%; height: 100%"
        />
      </div>
      <div
        class="wrapper-timeline wrapper-inner"
        :style="{ height: indicatorSideLength + 'px' }"
      >
        <detail-view ref="detailView" @clickConfig="handleOpenConfig" />
      </div>
    </div>
    <div></div>
    <load-data ref="dataHandler" />
    <create-view ref="createView" @createItem="handleSaveCreate" />
    <config-view ref="configView" @saveConfig="handleSaveConfig" />
    <setting-view ref="settingView" />
    <history-view ref="historyView" />
  </div>
</template>

<script setup>
import { ref, computed, markRaw, onMounted, onUnmounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete } from "@element-plus/icons-vue";
import SettingView from "./SettingView/index.vue";
import HistoryView from "./HistoryView/index.vue";
import ConfigView from "./ConfigView/index.vue";
import CreateView from "./CreateView/index.vue";
import IndicatorView from "./IndicatorView/index.vue";
import TimelineView from "./TimelineView/index.vue";
import DetailView from "./DetailView/index.vue";
import LoadData from "./LoadData/index.vue";
import useCommonStore from "@/store/common";
import useCapacityStore from "@/store/capacity";

const capacityStore = useCapacityStore();
const commonStore = useCommonStore();
const recordList = capacityStore.recordList;

const configView = ref(null);
const dataHandler = ref(null);
const createView = ref();
const settingView = ref();
const historyView = ref();

const indicatorSideLength = computed(() => {
  let h = commonStore.getClientSize.height - 180;
  let w = commonStore.getClientSize.width - 500;
  return w > h ? h : w;
});

let refreshPaused = false;
let refreshTimer = null;

const handleRefresh = () => {
  dataHandler.value.loadRecord();
};

const handleOpenCreate = () => {
  createView.value.openCreate();
};

const handleSaveCreate = (item) => {
  dataHandler.value.createRecord(item);
  ElMessage.success("已新建时段");
};

const handleOpenConfig = ({ id, idx }) => {
  configView.value.openConfig({ id, idx });
};

const handleSaveConfig = ({ id, idx, data }) => {
  dataHandler.value.saveConfig({ id, idx, data });
  ElMessage.success("已保存设置");
};

const handleDelete = () => {
  ElMessageBox.confirm("确定要删除当前时段的设置吗？", {
    confirmButtonText: "删除（不可恢复）",
    cancelButtonText: "取消",
    type: "warning",
    icon: markRaw(Delete),
  })
    .then(() => {
      dataHandler.value.deleteRecord();
      ElMessage.success("已删除");
    })
    .catch(() => {
      // ElMessage({
      //   type: 'info',
      //   message: 'Delete canceled',
      // })
    });
};

const detailView = ref();
const handleHover = (index) => {
  detailView.value.scrollTo(index);
};

const handleOpenSetting = () => {
  settingView.value.open();
};

const handleOpenHistory = () => {
  historyView.value.open();
};

onMounted(() => {
  handleRefresh();
  refreshTimer = setInterval(() => {
    if (!refreshPaused) {
      handleRefresh();
    }
  }, 3 * 1000);
});

onUnmounted(() => {
  clearInterval(refreshTimer);
});
</script>

<style scoped>
* {
  text-align: justify;
  box-sizing: border-box;
}

.title-wrapper {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
  transition: all 0.5s ease-in-out;
}

.title-wrapper:hover {
  background-color: rgba(128, 128, 128, 0.1);
}

.title-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.5s ease-in-out;
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
}

.title > * {
  margin: 0 6px;
}

.wrapper-outer {
  padding: 0 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.wrapper-inner {
  transition: all 0.5s ease-in-out;
  border: 1px solid rgba(128, 128, 128, 0.15);
  border-radius: 6px;
  background-color: rgba(128, 128, 128, 0);
}

.wrapper-inner:hover {
  border: 1px solid rgba(128, 128, 128, 0.25);
  background-color: rgba(128, 128, 128, 0.1);
}

.wrapper-indicator {
  min-width: 240px;
}

.wrapper-timeline {
  width: 240px;
  min-width: 180px;
  margin-left: 24px;
  overflow: hidden;
}
</style>
